<template>
  <div class="expert_body">
    <div class="search_box">
      <div class="input_box">
        <input class="inputsearch" type="text" v-model="searchinput" />
        <!-- {{ searchinput }} -->
        <Button id="search" @click="searchvalue()">点击搜索</Button>
      </div>
    </div>
    <div
      class="expert_body_item"
      v-for="(item, i) in dataList"
      :key="i"
      @click="
        $router.push({
          name: 'ExpertsInfo',
          query: {
            id: item.id
          }
        })
      "
    >
      <div class="expert_body_left">
        <div class="expert_body_image">
          <img class="head_img" v-if="item.image" :src="'https://gzccc.chlitchi.com:1433/dev-api'+item.image" alt />
          <img class="head_img" v-else-if="item.blob_data" :src="item.blob_data" alt />
          <img class="head_img" v-else src="../../../../static/image/default.png" alt />
        </div>
      </div>
      <div class="expert_body_right">
        <div class="expert_body_name">{{ item.title }}</div>
        <div class="expert_body_info">{{ item.major }}</div>
      </div>
    </div>
    <keepScroll @infinite="scroll">
      <div slot="no-more">正在加载更多...</div>
      <div slot="no-results">已加载到底</div>
    </keepScroll>
  </div>
</template>

<script>
import keepScroll from "vue-infinite-loading";
import { blobToBase64, base64ToBlob } from "@/utils/bolbtrbase64.js";
export default {
  data() {
    return {
      dataList: [],
      nowPage: 0,
      allCount: null,
      searchinput: ""
    };
  },
  components: {
    keepScroll
  },
  methods: {
    scroll(event) {
      if (this.allCount === this.dataList.length) {
        event.complete();
        return;
      }
      event.loaded();
      this.nowPage++;
      let mListData = this.dataList;
      this.$axios
        .get("api/expert/list", {
          params: {
            pageNum: this.nowPage,
            pageSize: 20
          },
          // responseType: 'blob',
        })
        .then(({ data }) => {
          data.data.forEach(item => {
            if (item.blob_data) {
              item.blob_data='data:image/jpeg;base64,'+item.blob_data
            }
            mListData.push(item);
          });
          this.dataList = mListData;
          event.reset();
        })
        .catch(error => {
          this.$msgBox.show("网络异常,请刷新", "error", 250, 60);
        });
      event.complete();
    },
    searchvalue() {
      let arr = [];
      if (this.searchinput) {
        arr = this.dataList.filter(data => {
          return data.title.indexOf(this.searchinput) !== -1;
        });
      } else {
        arr = this.dataList;
      }
      this.dataList.length = arr.length;
      this.dataList = arr;
    }
  },
  watch: {
    searchinput(value, oldValue) {
      // console.log(value,oldValue);
      if (value == "") {
        // this.scroll();
        location.reload();
        // console.log("已经更新");
      }
    }
  }
};
</script>

<style scoped>
.expert_body {
  max-width: 1000px;
  margin: 0 auto;
}
.expert_body_item {
  cursor: pointer;
  height: 80px;
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #e0e0e0;
}
.expert_body_right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 10px;
}
.expert_body_image,
.expert_body_image img {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
}
.head_img{
  
  object-fit: cover;
}
.expert_body_info {
  font-size: 13px;
  color: gray;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.expert_body_name {
  font-weight: bold;
  margin-bottom: 10px;
}

.expert_body_name::after {
  content: "专家";
  font-size: 12px;
  margin-left: 5px;
  background-color: #f60;
  color: #fff;
  padding: 0 2px;
  border-radius: 10px;
}
.search_box {
  height: 70px;
  width: 100%;
  /* background-color: aqua; */
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.input_box {
  width: 90%;
  height: 70px;
  /* background-color: #f60; */
  text-align: center;
  display: flex;

  justify-content: center;
}

.inputsearch {
  width: 70%;

  border: 1px solid #e2e2e2;

  height: 60px;

  font-size: 20px;

  float: left;

  background-image: url("../../../../static/image/查找用户.png");

  background-repeat: no-repeat;

  background-size: 25px;

  background-position: 5px center;

  padding: 0 0 0 40px;
}

#search {
  width: 100px;

  height: 60px;

  float: right;

  background: black;

  color: white;

  text-align: center;

  line-height: 32px;

  cursor: pointer;
}
</style>
